<template>
	<div>
		<searchCard
			@send-attrs="attrs = $event"
			:attrForm="attrForm"
			:showAttrTable="showAttrTable"></searchCard>
		<el-card class="body-card">
			<div class="attr-table" v-show="showAttrTable">
				<el-button
					type="primary"
					icon="plus"
					style="margin-bottom: 15px"
					@click="addOrEditAttr(undefined)">
					添加平台属性
				</el-button>
				<el-table border :data="attrs" stripe>
					<el-table-column type="index" prop="id" label="序号" align="center" width="80">
					</el-table-column>
					<el-table-column label="属性名称" prop="attrName" align="center" width="200">
					</el-table-column>
					<el-table-column label="属性值名称" prop="valueList" align="center">
						<template #default="{ row }">
							<el-tag v-for="attrValue in row.valueList" :key="attrValue.id" style="margin: 5px"
								>{{ attrValue.valueName }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="120">
						<template #default="{ row }">
							<el-button
								type="primary"
								size="small"
								icon="Edit"
								@click="addOrEditAttr(row)"></el-button>
							<el-popconfirm title="确定删除该属性吗" @confirm="deleteAttrInfo(row.id)">
								<template #reference>
									<el-button type="danger" size="small" icon="Delete"></el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="attr-edit" v-show="!showAttrTable">
				<el-form :model="attrForm" ref="attrFormRef">
					<el-form-item label="属性名称" style="width: 300px">
						<el-input v-model="attrForm.attrName"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="plus"
							@click="addAttrValue"
							:disabled="!attrForm.attrName"
							>添加属性值</el-button
						>
						<el-button @click="cancleInput">清除属性值</el-button>
					</el-form-item>
					<el-form-item>
						<el-table :data="attrForm.valueList" border stripe>
							<el-table-column type="index" width="80" label="序号" />
							<el-table-column label="属性值" prop="valueName">
								<template #default="{ row, $index }">
									<template v-if="row.flag">
										<el-input
											placeholder="请输入属性值"
											v-model="row.valueName"
											clearable
											@blur="inputBlur(row, $index)"
											:ref="(el:any)=>inputElAttr[$index] = el" />
									</template>
									<span
										v-else
										@click="clickSpan($index, row)"
										style="display: inline-block; width: 100%; height: 30px">
										{{ row.valueName }}</span
									>
								</template>
							</el-table-column>
							<el-table-column width="200" label="操作">
								<template #default="{ row, $index }">
									<el-button
										type="danger"
										size="small"
										icon="Delete"
										@click="deleteValue(row, $index)"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="saveAttr">保存</el-button>
						<el-button @click="cnacleAttr">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="Attr">
	import { nextTick, reactive, ref } from 'vue';
	import type { Attr, AttrForm, Value } from '@/api/product/attr/type';
	import {
		reqDeleteAttrInfo,
		reqSaveAttrInfo,
		reqUpdateAttrInfo,
		reqGetAttr,
	} from '@/api/product/attr';
	let attrs = ref<Attr[]>([]);
	let showAttrTable = ref(true);
	let attrFormRef = ref();
	let inputElAttr = reactive<any[]>([]);
	let canAddValue = ref(true);
	let attrForm = reactive<AttrForm>({
		id: undefined,
		attrName: undefined,
		thirdLevel: undefined,
		valueList: [],
	});
	// 根据三级分类id获取属性列表
	let getAttrByCategory = async (id: number) => {
		let { code, message, data } = await reqGetAttr(id);
		if (code == 200) {
			attrs.value = data;
		} else {
			ElMessage.error({ message: message });
		}
	};
	let addOrEditAttr = async (attr: Attr | undefined) => {
		if (!attrForm.thirdLevel) {
			ElMessage.error({ message: '请先选择三级分类' });
			return;
		}
		showAttrTable.value = false;
		if (attr) {
			// 更新
			Object.keys(attr).forEach((key) => {
				attrForm[key as keyof Attr] = attr[key as keyof Attr] as never;
			});
			return;
		}
	};
	let addAttrValue = () => {
		if (!canAddValue.value) return;
		if (attrForm.valueList.length == 0) {
			// 第一次添加
			attrForm.valueList.push({ valueName: '', flag: true });
			nextTick(() => {
				inputElAttr[inputElAttr.length - 1].focus();
			});
		} else {
			// 非第一次添加，必须输入属性值才能继续添加
			if (!attrForm.valueList[attrForm.valueList.length - 1].valueName) return;
			attrForm.valueList.push({ valueName: '', flag: true });
			nextTick(() => {
				inputElAttr[inputElAttr.length - 1].focus();
			});
		}
	};
	let cancleInput = () => {
		attrForm.valueList = [];
	};

	let deleteValue = (value: Value, $index: number) => {
		attrForm.valueList.splice($index, 1);
		inputElAttr.splice($index, 1);
	};
	let saveAttr = async () => {
		// 去除空白
		if (!attrForm.valueList[attrForm.valueList.length - 1].valueName) {
			attrForm.valueList.pop();
		}
		let { code, message } = attrForm.id
			? await reqUpdateAttrInfo(attrForm)
			: await reqSaveAttrInfo(attrForm);
		if (code == 200) {
			ElMessage.success({ message: message });
			cnacleAttr();
			getAttrByCategory(attrForm.thirdLevel as number);
		} else {
			ElMessage.error({ message: message });
		}
	};
	let cnacleAttr = () => {
		attrForm.attrName = '';
		attrForm.id = undefined;
		attrForm.valueList = [];
		showAttrTable.value = true;
	};
	let inputBlur = (row: any, $index: number) => {
		// 不能输入重复的属性值
		let repeat = attrForm.valueList.find((v) => {
			if (v != row) {
				return v.valueName == row.valueName;
			}
		});
		if (repeat) {
			canAddValue.value = false;
			ElMessage.error({ message: '不能输入重复的属性值' });
			inputElAttr[$index].focus();
			return;
		} else if (!row.valueName) {
			// 不能输入空白
			ElMessage.error({ message: '不能输入空白值' });
			inputElAttr[$index].focus();
			canAddValue.value = false;
			return;
		} else {
			canAddValue.value = true;
			row.flag = false;
		}
	};
	let clickSpan = ($index: number, row: any) => {
		row.flag = true;
		nextTick(() => {
			inputElAttr[$index].focus();
		});
	};
	let deleteAttrInfo = async (id: number) => {
		let { code, message } = await reqDeleteAttrInfo(id);
		if (code == 200) {
			ElMessage.success({ message: '删除成功' });
			getAttrByCategory(attrForm.thirdLevel as number);
		} else {
			ElMessage.error({ message: message });
		}
	};
</script>
<style scoped lang="scss">
	.head-card {
		width: 100%;
		height: 20%;
		margin-bottom: 15px;
	}

	.el-form-item {
		margin-bottom: 15px;
	}

	.head-body {
		width: 100%;
	}
	.edit-attr-margin{
		margin-bottom: 10px;
	}
</style>
